<!-- <template>
  <div class="container" ref="container">

  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue';
import {init,Rect} from 'zrender';

const container=ref<HTMLDivElement|null>(null)

onMounted(()=>{
  // 我们使用zrender创建的一个场景
  const zr=init(container.value);
  zr.add(
      new Rect({
          shape:{
              x:10,
              y:10,
              width:100,
              height:100
          },
          style:{
              fill:"red"
          }
      })
  )
})
</script>


<style scoped>
.container{
  width:500px;
  height:500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-sizing:border-box;
}
</style> -->

<template>
  <div class="container" ref="container">

  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue';
import {init,Rect} from 'zrender';

const container=ref<HTMLDivElement|null>(null)

onMounted(()=>{
  // 我们使用zrender创建的一个场景
  const zr=init(container.value);
  const ticks=10
  for(let i=0;i<ticks;i++){
      const height=Math.random()*100+20
      const barWidth=20
      const barGap=10
      const randomColor=`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
      zr.add(
        new Rect({
          shape:{
              x:barWidth+i*(barWidth+barGap),
              y:500-height,
              width:barWidth,
              height
          },
          style:{
              fill:randomColor
          }
      })
  )
  }


  /* zr.add(
      new Rect({
          shape:{
              x:10,
              y:10,
              width:100,
              height:100
          },
          style:{
              fill:"red"
          }
      })
  ) */
})
</script>


<style scoped>
.container{
  width:500px;
  height:500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-sizing:border-box;
}
</style>